<template>
  <div>
    <!-- 弹框 :visible.sync="dialogVisible"控制显影  true为显示-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="clearForm"
    >
      <!-- 内容区域 -->
      <el-form
        :model="goodsForm"
        :rules="rules"
        ref="goodsForm"
        label-width="100px"
        class="demo-goodsForm"
      >
        <el-form-item label="类目选择" prop="category">
          <el-button type="primary" @click="innerVisible = !innerVisible"
            >类目选择</el-button
          >
          <span>{{ goodsForm.category }}</span>
        </el-form-item>
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="goodsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="goodsForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="num">
          <el-input v-model="goodsForm.num"></el-input>
        </el-form-item>
        <el-form-item label="商品卖点" prop="sellPoint">
          <el-input v-model="goodsForm.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="上架时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="goodsForm.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="goodsForm.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <el-button type="primary" @click="innerVisibleImg = !innerVisibleImg"
            >上传图片</el-button
          >
          <img :src="goodsForm.image" alt="" width="200px" />
        </el-form-item>

        <el-form-item label="商品描述" prop="descs">
          <Wangeditor @sendEditor="sendEditor" ref="myEditor" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>

      <!-- 内弹框 类目选择-->
      <el-dialog
        width="40%"
        title="类目选择"
        :visible.sync="innerVisible"
        append-to-body
      >
        <TreeGoods @setTreeData="setTreeData" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="showTreeData">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 内弹框 上传图片-->
      <el-dialog
        width="40%"
        title="上传图片"
        :visible.sync="innerVisibleImg"
        append-to-body
      >
        <UploadImg @sendImg="sendImg" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="clearForm">取 消</el-button>
          <el-button type="primary" @click="showImg">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import TreeGoods from "./TreeGoods.vue";
import UploadImg from "./UploadImg.vue";
import Wangeditor from "./Wangeditor.vue";
export default {
  props: {
    title: {
      type: String,
      default: "添加商品",
    },
    rowData: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      dialogVisible: false, //外弹框显隐
      innerVisible: false, //内弹框显隐  类目选择
      innerVisibleImg: false, //内弹框显隐 上传图片
      treeData: {}, //接收tree数据
      imgUrl: "",
      goodsForm: {
        //表单容器-对象
        title: "",
        price: "",
        num: "",
        sellPoint: "",
        image: "",
        descs: "",
        category: "",
        date1: "",
        date2: "",
        cid: "",
        id:""//id从父组件的tableData里边拿，用$parent
      },
      rules: {
        //校验规则
        title: [
          { required: true, message: "请商品名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        region: [{ required: true, message: "请输入价格", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  //监听
  watch: {
    rowData(val) {
      this.goodsForm = val;
      // console.log(this.$refs.myEditor);
      //设置王编辑的数据
      //注意 watch比生命周期created还快， this.$refs.myEditor还没读到mouth
      //created里能读到计算属性，方法和监听   使用nextTick时可以等页面dom执行完毕再执行异步（去读）
      this.$nextTick(() => {
        console.log(this.$refs.myEditor.editor.txt.html(val.descs));
        this.$refs.myEditor.editor.txt.html(val.descs);
      });
    },
  },
  methods: {
    //自定义事件  通知父亲修改dialogVisible
    close() {
      this.$emit("changeDialog");
    },
    submitForm() {
      this.$refs.goodsForm.validate((valid) => {
        if (valid) {
          console.log("成功", this.goodsForm);
          // 接口参数： title cid  category sellPoint price num descs paramsInfo image
          let { title, cid, category, sellPoint, price, num, descs, image,id } =
            this.goodsForm;
          //判断当前按钮类型
          if (this.title === "添加商品") {
            console.log("添加商品");
            this.$api
              .getAddGoods({
                title,
                cid,
                category,
                sellPoint,
                price,
                num,
                descs,
                image,
              })
              .then((res) => {
                // console.log(res.data);
                if (res.data.status === 200) {
                  this.$parent.http(1); //更新父组件数据
                  this.$message({
                    message: "添加商品成功",
                    type: "success",
                  });
                  this.clearForm();
                } else {
                  this.$message.error("添加商品失败");
                }
              });
          } else {
            console.log("编辑商品");
            this.$api
              .getupdataGoods({
                id,
                title,
                cid,
                category,
                sellPoint,
                price,
                num,
                descs,
                image,
              })
              .then((res) => {
                console.log(res.data);
                if(res.data.status === 200){
                  this.$parent.http(1); //更新父组件数据
                  this.$message({
                    message: "修改商品成功",
                    type: "success",
                  });
                  this.clearForm();
                }else{
                  console.log('修改失败');
                }
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //封装清空表单数据的方法
    clearForm() {
      this.dialogVisible = false; //关闭弹框

      this.goodsForm = []; //清空表单
      // this.$refs.goodsForm.resetFields()//法二
      this.$refs.myEditor.editor.txt.clear(); //清空王编辑，ref传值
    },
    //获取tree数据
    setTreeData(val) {
      // console.log(val);
      this.treeData = val;
    },
    //显示tree数据
    showTreeData() {
      this.innerVisible = !this.innerVisible; //点击确定后关闭弹框
      this.goodsForm.cid = this.treeData.cid;
      this.goodsForm.category = this.treeData.name; //改变span数据
    },
    //显示图片地址
    sendImg(val) {
      // console.log(val);
      this.imgUrl = val;
    },
    //显示图片
    showImg() {
      this.innerVisibleImg = false;
      this.goodsForm.image = this.imgUrl;
    },
    //接收wang数据
    sendEditor(val) {
      this.goodsForm.descs = val;
    },
  },
  components: { TreeGoods, UploadImg, Wangeditor },
};
</script>

<style lang="less" scoped>
.add-goods {
  margin: 20px;
}
.title {
  padding: 10px;
  background: #fff;
  border: 1px solid #eee;
  margin-bottom: 20px;
}
.myFrom {
  background: #fff;
  padding: 10px;
  padding-right: 30px;
}
.line {
  text-align: center;
}
img {
  margin-left: 10px;
}
</style>
